<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>资产公证平台</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
  
  <!-- 自定义Tailwind配置 -->
  <script>
    tailwind.config = {
      theme: {
        extend: {
          colors: {
            primary: '#165DFF',
            secondary: '#4080FF',
            neutral: '#F5F7FA',
            dark: '#1D2129',
          },
          fontFamily: {
            inter: ['Inter', 'system-ui', 'sans-serif'],
          },
        },
      }
    }
  </script>
  
  <style type="text/tailwindcss">
    @layer utilities {
      .content-auto {
        content-visibility: auto;
      }
      .card-shadow {
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
      }
      .btn-hover {
        transition: all 0.3s ease;
      }
      .btn-hover:hover {
        transform: translateY(-2px);
      }
    }
  </style>
</head>
<body class="font-inter bg-neutral text-dark min-h-screen flex flex-col">
  <!-- 导航栏 -->
  <nav class="navbar navbar-expand-lg navbar-light bg-white sticky-top shadow-sm">
    <div class="container">
      <a class="navbar-brand text-primary font-bold text-xl" href="index.html">
        <i class="fa-solid fa-shield-check mr-2"></i>资产公证平台
      </a>

      <ul class="navbar-nav">
        <li class="nav-item">
          <a class="nav-link active" href="index.html">首页</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="create.html">创建资产</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="query.html">查询资产</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="transfer.html">转移资产</a>
        </li>
      </ul>
    </div>
  </nav>

  <!-- 主内容区 -->
  <main class="flex-grow">
    <!-- 英雄区 -->
    <section class="bg-gradient-to-r from-primary to-secondary text-white py-20">
      <div class="container">
        <div class="row justify-content-center">
          <div class="col-lg-8 text-center">
            <h1 class="display-4 font-bold mb-6">安全、透明的资产公证服务</h1>
            <p class="lead mb-8">利用区块链技术，为您的资产提供不可篡改的数字证明</p>
            <div class="d-flex justify-content-center gap-4">
              <a href="create.html" class="btn btn-light text-primary px-6 py-3 rounded-lg font-medium shadow-lg btn-hover">
                <i class="fa-solid fa-plus-circle mr-2"></i>创建资产
              </a>
              <a href="query.html" class="btn btn-outline-light px-6 py-3 rounded-lg font-medium btn-hover">
                <i class="fa-solid fa-search mr-2"></i>查询资产
              </a>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- 功能介绍 -->
    <section class="py-16 bg-white">
      <div class="container">
        <h2 class="text-3xl font-bold text-center mb-12">我们的服务</h2>
        <div class="row">
          <div class="col-md-6 col-lg-3 mb-8">
            <div class="bg-neutral rounded-xl p-6 card-shadow h-full transition-transform hover:transform hover:scale-105">
              <div class="w-14 h-14 bg-primary/10 rounded-full flex items-center justify-center mb-6">
                <i class="fa-solid fa-file-contract text-primary text-2xl"></i>
              </div>
              <h3 class="text-xl font-semibold mb-3">资产创建与上链</h3>
              <p class="text-gray-600">将您的资产信息转化为区块链上的数字资产，确保数据不可篡改</p>
            </div>
          </div>
          
          <div class="col-md-6 col-lg-3 mb-8">
            <div class="bg-neutral rounded-xl p-6 card-shadow h-full transition-transform hover:transform hover:scale-105">
              <div class="w-14 h-14 bg-primary/10 rounded-full flex items-center justify-center mb-6">
                <i class="fa-solid fa-search text-primary text-2xl"></i>
              </div>
              <h3 class="text-xl font-semibold mb-3">资产查询验证</h3>
              <p class="text-gray-600">通过资产ID或所有者信息，快速查询和验证资产的真实性和完整性</p>
            </div>
          </div>
          
          <div class="col-md-6 col-lg-3 mb-8">
            <div class="bg-neutral rounded-xl p-6 card-shadow h-full transition-transform hover:transform hover:scale-105">
              <div class="w-14 h-14 bg-primary/10 rounded-full flex items-center justify-center mb-6">
                <i class="fa-solid fa-exchange text-primary text-2xl"></i>
              </div>
              <h3 class="text-xl font-semibold mb-3">资产转移</h3>
              <p class="text-gray-600">安全、透明地完成资产所有权的转移，所有操作记录在区块链上</p>
            </div>
          </div>
          
          <div class="col-md-6 col-lg-3 mb-8">
            <div class="bg-neutral rounded-xl p-6 card-shadow h-full transition-transform hover:transform hover:scale-105">
              <div class="w-14 h-14 bg-primary/10 rounded-full flex items-center justify-center mb-6">
                <i class="fa-solid fa-lock text-primary text-2xl"></i>
              </div>
              <h3 class="text-xl font-semibold mb-3">安全保障</h3>
              <p class="text-gray-600">采用先进的加密技术和区块链分布式存储，确保您的资产信息安全</p>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- 工作流程 -->
    <section class="py-16 bg-neutral">
      <div class="container">
        <h2 class="text-3xl font-bold text-center mb-12">工作流程</h2>
        <div class="row">
          <div class="col-lg-3 col-md-6 mb-8">
            <div class="bg-white rounded-xl p-6 card-shadow text-center h-full">
              <div class="w-16 h-16 bg-primary text-white rounded-full flex items-center justify-center mx-auto mb-6 text-2xl font-bold">1</div>
              <h3 class="text-xl font-semibold mb-3">创建资产</h3>
              <p class="text-gray-600">填写资产信息，包括资产ID、所有者、名称和详细描述</p>
            </div>
          </div>
          
          <div class="col-lg-3 col-md-6 mb-8">
            <div class="bg-white rounded-xl p-6 card-shadow text-center h-full">
              <div class="w-16 h-16 bg-primary text-white rounded-full flex items-center justify-center mx-auto mb-6 text-2xl font-bold">2</div>
              <h3 class="text-xl font-semibold mb-3">验证信息</h3>
              <p class="text-gray-600">系统自动验证资产信息的完整性和合规性</p>
            </div>
          </div>
          
          <div class="col-lg-3 col-md-6 mb-8">
            <div class="bg-white rounded-xl p-6 card-shadow text-center h-full">
              <div class="w-16 h-16 bg-primary text-white rounded-full flex items-center justify-center mx-auto mb-6 text-2xl font-bold">3</div>
              <h3 class="text-xl font-semibold mb-3">资产上链</h3>
              <p class="text-gray-600">将资产信息写入区块链，生成不可篡改的数字记录</p>
            </div>
          </div>
          
          <div class="col-lg-3 col-md-6 mb-8">
            <div class="bg-white rounded-xl p-6 card-shadow text-center h-full">
              <div class="w-16 h-16 bg-primary text-white rounded-full flex items-center justify-center mx-auto mb-6 text-2xl font-bold">4</div>
              <h3 class="text-xl font-semibold mb-3">获取证书</h3>
              <p class="text-gray-600">获得资产的数字公证证书，随时可验证和分享</p>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- 统计数据 -->
    <section class="py-16 bg-primary text-white">
      <div class="container">
        <div class="row text-center">
          <div class="col-md-3 mb-8">
            <div class="counter-value text-4xl font-bold mb-2" data-target="15000">0</div>
            <p class="text-white/80">已公证资产</p>
          </div>
          <div class="col-md-3 mb-8">
            <div class="counter-value text-4xl font-bold mb-2" data-target="5000">0</div>
            <p class="text-white/80">活跃用户</p>
          </div>
          <div class="col-md-3 mb-8">
            <div class="counter-value text-4xl font-bold mb-2" data-target="99">0</div>
            <p class="text-white/80">成功率(%)</p>
          </div>
          <div class="col-md-3 mb-8">
            <div class="counter-value text-4xl font-bold mb-2" data-target="120">0</div>
            <p class="text-white/80">日均交易</p>
          </div>
        </div>
      </div>
    </section>

    <!-- 常见问题 -->
    <section class="py-16 bg-white">
      <div class="container">
        <h2 class="text-3xl font-bold text-center mb-12">常见问题</h2>
        <div class="row justify-content-center">
          <div class="col-lg-8">
            <div class="accordion" id="faqAccordion">
              <div class="accordion-item mb-3 rounded-lg border-0 card-shadow">
                <h2 class="accordion-header" id="headingOne">
                  <button class="accordion-button bg-white text-dark font-medium rounded-lg" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                    什么是资产公证？
                  </button>
                </h2>
                <div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#faqAccordion">
                  <div class="accordion-body text-gray-600">
                    资产公证是利用区块链技术，将您的资产信息（如房产、车辆、艺术品等）转化为不可篡改的数字记录。这些记录存储在分布式账本上，确保资产的真实性和所有权清晰可查。
                  </div>
                </div>
              </div>
              
              <div class="accordion-item mb-3 rounded-lg border-0 card-shadow">
                <h2 class="accordion-header" id="headingTwo">
                  <button class="accordion-button bg-white text-dark font-medium rounded-lg collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                    资产公证有什么好处？
                  </button>
                </h2>
                <div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#faqAccordion">
                  <div class="accordion-body text-gray-600">
                    资产公证提供了资产真实性的可靠证明，降低了欺诈风险；简化了资产交易流程，提高了交易效率；提供了透明的所有权历史，便于追溯和验证；增强了资产的可信度和市场价值。
                  </div>
                </div>
              </div>
              
              <div class="accordion-item mb-3 rounded-lg border-0 card-shadow">
                <h2 class="accordion-header" id="headingThree">
                  <button class="accordion-button bg-white text-dark font-medium rounded-lg collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
                    如何查询已公证的资产？
                  </button>
                </h2>
                <div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree" data-bs-parent="#faqAccordion">
                  <div class="accordion-body text-gray-600">
                    您可以通过资产ID或所有者信息在我们的查询页面进行查询。只需输入相关信息，系统将返回该资产的详细信息，包括资产ID、所有者、创建时间、资产描述等，以及完整的交易历史记录。
                  </div>
                </div>
              </div>
              
              <div class="accordion-item mb-3 rounded-lg border-0 card-shadow">
                <h2 class="accordion-header" id="headingFour">
                  <button class="accordion-button bg-white text-dark font-medium rounded-lg collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseFour" aria-expanded="false" aria-controls="collapseFour">
                    资产转移需要什么条件？
                  </button>
                </h2>
                <div id="collapseFour" class="accordion-collapse collapse" aria-labelledby="headingFour" data-bs-parent="#faqAccordion">
                  <div class="accordion-body text-gray-600">
                    资产转移需要当前所有者发起转移请求，并提供新所有者的身份信息。转移过程需要双方确认，并可能需要满足特定的验证要求，具体取决于资产类型和相关法规要求。
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- 联系我们 -->
    <section class="py-16 bg-neutral">
      <div class="container">
        <h2 class="text-3xl font-bold text-center mb-12">联系我们</h2>
        <div class="row justify-content-center">
          <div class="col-lg-8">
            <div class="bg-white rounded-xl p-8 card-shadow">
              <form>
                <div class="row mb-6">
                  <div class="col-md-6 mb-4">
                    <label for="name" class="form-label font-medium">姓名</label>
                    <input type="text" class="form-control rounded-lg border-gray-300" id="name" placeholder="请输入您的姓名">
                  </div>
                  <div class="col-md-6 mb-4">
                    <label for="email" class="form-label font-medium">邮箱</label>
                    <input type="email" class="form-control rounded-lg border-gray-300" id="email" placeholder="请输入您的邮箱">
                  </div>
                </div>
                <div class="mb-6">
                  <label for="subject" class="form-label font-medium">主题</label>
                  <input type="text" class="form-control rounded-lg border-gray-300" id="subject" placeholder="请输入咨询主题">
                </div>
                <div class="mb-6">
                  <label for="message" class="form-label font-medium">留言内容</label>
                  <textarea class="form-control rounded-lg border-gray-300" id="message" rows="5" placeholder="请输入您的留言内容"></textarea>
                </div>
                <button type="submit" class="btn btn-primary px-6 py-3 rounded-lg font-medium btn-hover">
                  <i class="fa-solid fa-paper-plane mr-2"></i>提交
                </button>
              </form>
            </div>
          </div>
        </div>
      </div>
    </section>
  </main>

  <!-- 页脚 -->
  <footer class="bg-dark text-white py-10">
    <div class="container">
      <div class="row">
        <div class="col-lg-4 mb-8">
          <h3 class="text-xl font-bold mb-4">资产公证平台</h3>
          <p class="text-gray-400 mb-6">利用区块链技术，为您的资产提供安全、透明的公证服务</p>
          <div class="d-flex gap-4">
            <a href="#" class="text-gray-400 hover:text-white transition-colors">
              <i class="fa-brands fa-facebook"></i>
            </a>
            <a href="#" class="text-gray-400 hover:text-white transition-colors">
              <i class="fa-brands fa-twitter"></i>
            </a>
            <a href="#" class="text-gray-400 hover:text-white transition-colors">
              <i class="fa-brands fa-linkedin"></i>
            </a>
            <a href="#" class="text-gray-400 hover:text-white transition-colors">
              <i class="fa-brands fa-instagram"></i>
            </a>
          </div>
        </div>
        
        <div class="col-lg-2 col-md-6 mb-8">
          <h4 class="text-lg font-semibold mb-4">快速链接</h4>
          <ul class="list-unstyled text-gray-400">
            <li class="mb-2"><a href="index.html" class="hover:text-white transition-colors">首页</a></li>
            <li class="mb-2"><a href="create.html" class="hover:text-white transition-colors">创建资产</a></li>
            <li class="mb-2"><a href="query.html" class="hover:text-white transition-colors">查询资产</a></li>
            <li class="mb-2"><a href="transfer.html" class="hover:text-white transition-colors">转移资产</a></li>
          </ul>
        </div>
        
        <div class="col-lg-3 col-md-6 mb-8">
          <h4 class="text-lg font-semibold mb-4">联系我们</h4>
          <ul class="list-unstyled text-gray-400">
            <li class="mb-2"><i class="fa-solid fa-map-marker-alt mr-2"></i>北京市海淀区中关村大街</li>
            <li class="mb-2"><i class="fa-solid fa-phone mr-2"></i>400-123-4567</li>
            <li class="mb-2"><i class="fa-solid fa-envelope mr-2"></i>contact@assetnotary.com</li>
          </ul>
        </div>
        
        <div class="col-lg-3 mb-8">
          <h4 class="text-lg font-semibold mb-4">订阅更新</h4>
          <p class="text-gray-400 mb-4">订阅我们的通讯，获取最新的资产公证资讯</p>
          <form class="d-flex">
            <input type="email" class="form-control rounded-l-lg border-gray-700 bg-gray-800 text-white" placeholder="您的邮箱">
            <button type="submit" class="btn btn-primary rounded-r-lg">
              <i class="fa-solid fa-arrow-right"></i>
            </button>
          </form>
        </div>
      </div>
      
      <div class="border-t border-gray-800 pt-8 mt-8 text-center text-gray-500">
        <p>&copy; 2025 资产公证平台. 保留所有权利.</p>
      </div>
    </div>
  </footer>

  <!-- JavaScript -->
  <script>
    // 数字增长动画
    document.addEventListener('DOMContentLoaded', function() {
      const counters = document.querySelectorAll('.counter-value');
      const speed = 200;
      
      counters.forEach(counter => {
        const target = +counter.getAttribute('data-target');
        const count = +counter.innerText;
        const increment = target / speed;
        
        if (count === 0) {
          const updateCount = () => {
            const value = Math.ceil(count + increment);
            counter.innerText = value;
            
            if (value < target) {
              setTimeout(updateCount, 1);
            } else {
              counter.innerText = target;
            }
          };
          
          // 当元素进入视口时启动动画
          const observer = new IntersectionObserver((entries) => {
            if (entries[0].isIntersecting) {
              updateCount();
              observer.disconnect();
            }
          }, { threshold: 0.5 });
          
          observer.observe(counter);
        }
      });
    });
  </script>
</body>
</html>
    